<template>
  <div class="max-w-3xl mx-auto bg-white shadow rounded-lg overflow-hidden">
    <div class="px-4 py-5 sm:p-6">
      <h3 class="text-lg leading-6 font-medium text-gray-900">酵母计算器</h3>
      <div class="mt-2 max-w-xl text-sm text-gray-500">
        <p>计算啤酒所需的酵母投放量，基于麦汁体积、原始比重和其他因素。</p>
      </div>

      <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
        <!-- 麦汁体积 -->
        <div>
          <label for="wort-volume" class="block text-sm font-medium text-gray-700">
            麦汁体积
          </label>
          <div class="mt-1 relative rounded-md shadow-sm">
            <input
              type="number"
              name="wort-volume"
              id="wort-volume"
              v-model="wortVolume"
              step="0.1"
              class="focus:ring-brew-amber focus:border-brew-amber block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
              placeholder="20.0"
              @input="calculateYeastPitch"
            >
            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
              <span class="text-gray-500 sm:text-sm">L</span>
            </div>
          </div>
        </div>

        <!-- 原始比重 -->
        <div>
          <label for="original-gravity" class="block text-sm font-medium text-gray-700">原始比重</label>
          <div class="mt-1 relative rounded-md shadow-sm">
            <input
              type="number"
              name="original-gravity"
              id="original-gravity"
              v-model="originalGravity"
              step="0.001"
              class="focus:ring-brew-amber focus:border-brew-amber block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
              placeholder="1.048"
              @input="calculateYeastPitch"
            >
            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
              <span class="text-gray-500 sm:text-sm">SG</span>
            </div>
          </div>
        </div>

        <!-- 啤酒类型 -->
        <div>
          <label for="beer-type" class="block text-sm font-medium text-gray-700">啤酒类型</label>
          <select
            id="beer-type"
            name="beer-type"
            v-model="beerType"
            class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-brew-amber focus:border-brew-amber sm:text-sm rounded-md"
            @change="calculateYeastPitch"
          >
            <option value="ale">艾尔啤酒</option>
            <option value="lager">拉格啤酒</option>
          </select>
        </div>

        <!-- 酵母类型 -->
        <div>
          <label for="yeast-type" class="block text-sm font-medium text-gray-700">酵母类型</label>
          <select
            id="yeast-type"
            name="yeast-type"
            v-model="yeastType"
            class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-brew-amber focus:border-brew-amber sm:text-sm rounded-md"
            @change="calculateYeastPitch"
          >
            <option value="liquid">液体酵母</option>
            <option value="dry">干燥酵母</option>
          </select>
        </div>

        <!-- 酵母活性 -->
        <div>
          <label for="yeast-viability" class="block text-sm font-medium text-gray-700">
            酵母活性
            <span class="text-gray-500">(生产日期影响)</span>
          </label>
          <div class="mt-1 relative rounded-md shadow-sm">
            <input
              type="number"
              name="yeast-viability"
              id="yeast-viability"
              v-model="yeastViability"
              min="1"
              max="100"
              step="1"
              class="focus:ring-brew-amber focus:border-brew-amber block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
              placeholder="85"
              @input="calculateYeastPitch"
            >
            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
              <span class="text-gray-500 sm:text-sm">%</span>
            </div>
          </div>
        </div>

        <!-- 发酵温度 -->
        <div>
          <label for="fermentation-temp" class="block text-sm font-medium text-gray-700">发酵温度</label>
          <div class="mt-1 relative rounded-md shadow-sm">
            <input
              type="number"
              name="fermentation-temp"
              id="fermentation-temp"
              v-model="fermentationTemp"
              step="0.1"
              class="focus:ring-brew-amber focus:border-brew-amber block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
              placeholder="20.0"
              @input="calculateYeastPitch"
            >
            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
              <span class="text-gray-500 sm:text-sm">°C</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 计算结果 -->
      <div class="mt-6">
        <div class="rounded-md bg-blue-50 p-4">
          <div class="flex">
            <div class="flex-shrink-0">
              <BeakerIcon class="h-5 w-5 text-blue-400" aria-hidden="true" />
            </div>
            <div class="ml-3">
              <h3 class="text-sm font-medium text-blue-800">推荐酵母投放量</h3>
              <div class="mt-2 text-sm text-blue-700">
                <div v-if="yeastType === 'liquid'" class="space-y-1">
                  <p class="font-medium text-2xl">{{ recommendedCellCount }} 亿细胞</p>
                  <p>约 {{ recommendedPackets }} 包液体酵母</p>
                  <p class="text-xs">(每包约含 1000 亿活细胞)</p>
                </div>
                <div v-else class="space-y-1">
                  <p class="font-medium text-2xl">{{ recommendedDryYeast }} 克</p>
                  <p>约 {{ recommendedDryPackets }} 包干燥酵母</p>
                  <p class="text-xs">(每包 11.5g)</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 计算公式说明 -->
      <div class="mt-6">
        <h4 class="text-sm font-medium text-gray-900">计算方法</h4>
        <div class="mt-2 text-sm text-gray-500 space-y-1">
          <p>艾尔啤酒：0.75-1.0 百万细胞/mL/°P</p>
          <p>拉格啤酒：1.5-2.0 百万细胞/mL/°P</p>
          <p>考虑因素：麦汁比重、发酵温度、酵母活性</p>
        </div>
      </div>

      <!-- 使用说明 -->
      <div class="mt-6 bg-yellow-50 border-l-4 border-yellow-400 p-4">
        <div class="flex">
          <div class="flex-shrink-0">
            <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
            </svg>
          </div>
          <div class="ml-3">
            <h3 class="text-sm font-medium text-yellow-800">使用说明</h3>
            <div class="mt-2 text-sm text-yellow-700">
              <ul class="list-disc pl-5 space-y-1">
                <li>液体酵母活性随时间降低，每月约降低20%</li>
                <li>高浓度麦汁需要更多酵母</li>
                <li>拉格啤酒需要更多酵母细胞</li>
                <li>发酵温度影响酵母活性</li>
                <li>建议使用酵母starter提高细胞数量</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { BeakerIcon } from '@heroicons/vue/24/outline'

// 输入参数
const wortVolume = ref('')
const originalGravity = ref('')
const beerType = ref('ale')
const yeastType = ref('liquid')
const yeastViability = ref('85')
const fermentationTemp = ref('')

// 比重转柏拉图度
function sgToPlato(sg) {
  return (-1 * 616.868) + (1111.14 * sg) - (630.272 * Math.pow(sg, 2)) + (135.997 * Math.pow(sg, 3))
}

// 计算所需细胞数
function calculateRequiredCells() {
  if (!wortVolume.value || !originalGravity.value || !fermentationTemp.value ||
      isNaN(wortVolume.value) || isNaN(originalGravity.value) || isNaN(fermentationTemp.value)) {
    return 0
  }

  const volume = parseFloat(wortVolume.value)
  const gravity = parseFloat(originalGravity.value)
  const temp = parseFloat(fermentationTemp.value)
  const plato = sgToPlato(gravity)

  // 基础细胞数（百万/mL/°P）
  let basePitchRate = beerType.value === 'ale' ? 0.75 : 1.5

  // 温度调整因子
  let tempFactor = 1.0
  if (beerType.value === 'ale') {
    if (temp < 18) tempFactor = 1.2
    else if (temp > 22) tempFactor = 0.9
  } else {
    if (temp < 10) tempFactor = 1.3
    else if (temp > 14) tempFactor = 0.8
  }

  // 计算总细胞数（亿）
  const cellCount = volume * 1000 * basePitchRate * plato * tempFactor

  // 考虑酵母活性
  const viability = parseFloat(yeastViability.value) / 100
  return Math.round(cellCount / viability)
}

// 计算推荐包数
const recommendedCellCount = computed(() => {
  const cells = calculateRequiredCells()
  return cells.toLocaleString('en-US')
})

const recommendedPackets = computed(() => {
  const cells = calculateRequiredCells()
  return Math.ceil(cells / 1000)
})

const recommendedDryYeast = computed(() => {
  const cells = calculateRequiredCells()
  // 每克干燥酵母约含200亿活细胞
  const grams = Math.ceil(cells / 200)
  return grams.toLocaleString('en-US')
})

const recommendedDryPackets = computed(() => {
  const grams = parseInt(recommendedDryYeast.value.replace(/,/g, ''))
  return Math.ceil(grams / 11.5)
})

// 计算函数
function calculateYeastPitch() {
  // 输入验证
  if (!wortVolume.value || !originalGravity.value || !fermentationTemp.value ||
      isNaN(wortVolume.value) || isNaN(originalGravity.value) || isNaN(fermentationTemp.value)) {
    return
  }

  const volume = parseFloat(wortVolume.value)
  const gravity = parseFloat(originalGravity.value)
  const temp = parseFloat(fermentationTemp.value)

  // 范围验证
  if (volume <= 0 || volume > 1000 || 
      gravity < 1.000 || gravity > 1.200 ||
      temp < 0 || temp > 40) {
    return
  }
}

// 监听输入变化
watch(
  [wortVolume, originalGravity, beerType, yeastType, yeastViability, fermentationTemp],
  calculateYeastPitch
)
</script>

<style scoped>
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
</style> 